#AO3 Skins

[raincloud47]

Raspberry Delight

The css for the buttons is from a skin made by @ao3commentoftheday with the colors changed to make them more pink.

The pink icons were made by @zerafinacss

@zerafinacss also has pink stat icons that look really good with this skin. It would replace the language/words/chapters ect. with some cute pink icons.

If you want this skin, the code is under here!

First, you have to put these codes into the wizard.

After you save that, you just copy and paste this code:

#header .logo {

background-image: url("https://images.squidge.org/images/2024/03/30/AO3_imageset_pink.png");

background-size: 250px 1044px;

padding: 42px 0 0 60px;

width: 0 !important;

height: 0 !important;

background-position: -140px -749.6px;

}

#header ul.primary,

#header h2 {

box-shadow: none;

}

.required-tags .rating-notrated,

.required-tags .rating-general-audience,

.required-tags .rating-explicit,

.required-tags .rating-mature,

.required-tags .rating-teen,

.required-tags .category-femslash,

.required-tags .category-gen,

.required-tags .category-slash,

.required-tags .category-none,

.required-tags .category-het,

.required-tags .category-multi,

.required-tags .category-other,

.required-tags .complete-no,

.required-tags .complete-yes,

.required-tags .warning-yes,

.required-tags .warning-no,

.required-tags .warning-choosenotto,

.required-tags .external-work,

.status .private .text,

.status .public,

.status .hidden,

.status .rec,

.status .count,

.index .skins .icon,

.index .mystery .icon,

.index .tag .icon,

.index .tagset .icon,

.comment .icon .anonymous,

.comment .icon .visitor,

.abbreviated .icon .visitor,

.abbreviated .icon .anonymous,

.skins .primary .icon,

.admin .primary .icon,

.tagset .primary .icon,

.tag .primary .icon,

a.rss span,

p.kudos,

#symbols-key dl img,

#bookmark-symbols-key img,

img[src$="/images/skins/iconsets/default/icon_user.png"],

img[src$="/images/skins/iconsets/default/icon_collection.png"],

img[src$="/images/lockblue.png"] {

background-image: url("https://images.squidge.org/images/2024/03/30/AO3_imageset_pink.png");

background-size: 200px 835px;

}

#symbols-key dl img,

#bookmark-symbols-key img {

width: 0 !important;

height: 0 !important;

padding: 25px 0 0 25px;

}

img[src$="/images/skins/iconsets/default/rating-notrated.png"],

img[src$="/images/skins/iconsets/default/category-none.png"],

img[src$="/images/skins/iconsets/default/warning-no.png"] {

background-position: -150px 0px;

}

img[src$="/images/skins/iconsets/default/rating-general-audience.png"] {

background-position: -50px -25px;

}

img[src$="/images/skins/iconsets/default/rating-teen.png"] {

background-position: 0px -25px;

}

img[src$="/images/skins/iconsets/default/rating-mature.png"] {

background-position: -75px -25px;

}

img[src$="/images/skins/iconsets/default/rating-explicit.png"] {

background-position: -25px -25px;

}

img[src$="/images/skins/iconsets/default/category-femslash.png"] {

background-position: -25px 0px;

}

img[src$="/images/skins/iconsets/default/category-het.png"] {

background-position: -75px 0px;

}

img[src$="/images/skins/iconsets/default/category-gen.png"] {

background-position: -50px 0px;

}

img[src$="/images/skins/iconsets/default/category-multi.png"] {

background-position: -100px 0px;

}

img[src$="/images/skins/iconsets/default/category-other.png"] {

background-position: -125px 0px;

}

img[src$="/images/skins/iconsets/default/warning-choosenotto.png"] {

background-position: -125px -25px;

}

img[src$="/images/skins/iconsets/default/warning-yes.png"] {

background-position: -150px -25px;

}

img[src$="/images/skins/iconsets/default/warning-external-work.png"] {

background-position: -75px -50px;

}

img[src$="/images/skins/iconsets/default/complete-no.png"] {

background-position: -100px -25px;

}

img[src$="/images/skins/iconsets/default/complete-yes.png"] {

background-position: -175px -25px;

}

img[src$="/images/skins/iconsets/default/bookmark-rec.png"] {

background-position: -100px -50px;

}

img[src$="/images/skins/iconsets/default/bookmark-public.png"] {

background-position: -125px -50px;

}

img[src$="/images/skins/iconsets/default/bookmark-private.png"] {

background-position: -175px -50px;

}

img[src$="/images/skins/iconsets/default/bookmark-hidden.png"] {

background-position: -150px -50px;

}

img[src$="/images/skins/iconsets/default/icon_user.png"],

img[src$="/images/skins/iconsets/default/icon_collection.png"],

img[src$="/images/lockblue.png"] {

width: 0 !important;

height: 0 !important;

}

img[src$="/images/skins/iconsets/default/icon_user.png"] {

padding: 100px 0 0 100px;

background-position: 0px -75px;

}

.index:not(.comment) .abbreviated img[src$="/images/skins/iconsets/default/icon_user.png"] {

padding: 75px 0 0 75px;

background-position: 0px -375px;

}

.index:not(.comment) img[src$="/images/skins/iconsets/default/icon_user.png"] {

padding: 55px 0 0 55px;

background-position: 0px -525px;

}

#greeting img[src$="/images/skins/iconsets/default/icon_user.png"] {

padding: 1.786em 0 0 1.786em;

background-position: 0 -19px;

background-size: 201% !important;

}

img[src$="/images/skins/iconsets/default/icon_collection.png"] {

padding: 100px 0 0 100px;

background-position: -100px -175px;

}

.index img[src$="/images/skins/iconsets/default/icon_collection.png"] {

padding: 55px 0 0 55px;

background-position: -55px -525px;

}

img[src$="/images/lockblue.png"] {

padding: 15px 0 0 15px;

background-position: -155px -305px;

}

button,

.actions a,

.actions a:link,

.action,

legend .action:link,

input[type="submit"],

.actions a:visited,

.actions li label,

a.action.modal-closer {

color: #FCF5ED;

background: #A0153E;

border: 1px solid #A0153E;

box-shadow: none;

}

button:hover,

.actions a:hover,

.action:hover,

input[type="submit"]:hover {

color: #00224D;

background: #ff2071 !important;

border: 1px solid #ff2071;

box-shadow: none;

}

.actions li .current,

.current,

#dashboard .current {

color: #FCF5ED;

background: #ff2071;

border: 1px solid #ff2071;

box-shadow: none;

}

dl.meta {

border: 1px solid #a0153e;

}

.wrapper {

box-shadow: 1px 1px 5px #a0153e;

}

.actions input:focus {

border-top: 1px solid #a0153e;

border-left: 1px solid #a0153e;

box-shadow: none;

}

#dashboard .secondary {

background: #ff2071;

box-shadow: inset 2px 2px 5px #a0153e;

}

.alert .userstuff {

background: #ff91ba;

border-color: #ffd6e6;

color: #8a0035;

}

.qtip-content,

.notice:not(.required),

.comment_notice,

.kudos_notice,

ul.notes,

.caution,

.notice a {

color: #fcb6d1;

}

.notice,

.comment_notice,

.kudos_notice,

ul.notes,

.caution,

.error,

.comment_error,

.kudos_error,

.alert.flash {

background: #a0153e;

border: 1px solid #ff91ba;

}

.required,

.error,

.alert.flash {

color: #fcc2d8;

}

button:hover,

.actions a:hover,

.action:hover,

input[type="submit"]:hover {

color: #4f001b;

}

.comment img[src$="/images/skins/iconsets/default/icon_user.png"] {

padding: 55px 0 0 55px !important;

background-position: 0px -525px !important;

}

^ If you only read on desktop, this last bit is unnecessary. It fixes the blank profile pics from being too big on mobile, but in doing so, it does keep the pics small on desktop

EDIT: If you have any problems with the tags on mobile, go to media and select: "max screen and (max-width: 42 em)" and it should fix it!

[cosmosbuilder]

made some pastel ao3 skins :}

i wanted to try out some more lightmode skins cause i haven't really done so in a while and they weren't really inspired by a piece of media like my other skins, but they were inspired by this color wheel

the code is a mishmash of tealtiam's teal skin with stars and ao3commentoftheday's peachy keen site skin as well as including shortening long tag fields by Xparrot on ao3

you can find the code for them here!

[ao3commentoftheday]

Glowy dark mode site skin

🎼 You would not believe your eyes, if 10 million fireflies ended up in the header of your AO3. 🎶

It's been a while since I tried glow effects, but I saw the fireflies and I couldn't resist.

CSS code under the cut.

#header {   background-image: url("https://cdn.pixabay.com/photo/2022/10/19/16/56/fireflies-7533056_1280.jpg");   background-repeat: no-repeat;   background-size: cover;   background-position: center center;   background-color: #152623; }

#header .heading {   height: 15em; }

#header .primary {   background: #0d1d1f;   box-shadow: 0px 0px 15px #f9f6ce; }

#header .logo, #header .heading sup {   visibility: hidden; }

#header .heading a {   color: #152623;   text-shadow: 0px 0px 15px #f9f6ce; }

.event .userstuff {   background: #425e50;   border: 1px solid #f9f6ce; }

#outer.wrapper {   background: #0d1d1f;   color: #f9f6ce; }

#main a {   color: #8c9b76; }

#greeting a.dropdown-toggle, #header .actions a {   color: #f9f6ce !important;   text-shadow: 0px 0px 3px #152623; }

#greeting .menu, #header .dropdown .menu, #header .dropdown:hover a {   background: #0d1d1f;   box-shadow: 0px 0px 15px #f9f6ce; }

span.submit.actions input.button {   display: none; }

#greeting img.icon {   display: none; }

#header #search .text, .search [role="tooltip"] {   background: #0d1d1f;   box-shadow: 0px 0px 15px #f9f6ce;   color: #f9f6ce !important;   border: 1px solid #0d1d1f; }

form.search input[type=text], form.search input[type=submit], .autocomplete div.dropdown ul {   background: #0d1d1f !important;   border: none;   box-shadow: 0px 0px 15px #f9f6ce;   color: #f9f6ce;   display: block; }

#header #search .text {   width: 7em; }

.notice, .comment_notice, .kudos_notice, ul.notes, .caution, .error, .comment_error, .kudos_error, .alert.flash {   background: #f9f6ce;   box-shadow: 0px 0px 15px #f9f6ce !important;   color: #0d1d1f;   border: none; }

.notice a, .comment_notice a, .kudos_notice a, ul.notes a, .caution a, .error a, .comment_error a, .kudos_error a, .alert.flash a {   color: #506957;   font-weight: bold; }

.splash .module h3 {   color: #f9f6ce;   border-bottom: 2px solid #f9f6ce; }

.splash .favorite li:nth-of-type(2n+1) a {   background: #f9f6ce;   box-shadow: 0px 0px 15px #f9f6ce;   color: #0d1d1f;   font-weight: bold;   font-variant: small-caps; }

.splash .favorite li:nth-of-type(2n+2) a {   color: #f9f6ce;   font-weight: bold;   font-variant: small-caps;   font-size: 110%; }

.splash .favorite li:nth-of-type(2n+1) a:hover, .splash .favorite li:nth-of-type(2n+2) a:hover {   color: #f9f6ce;   font-weight: bold;   font-variant: small-caps;   background: #425e50; }

#footer {   background: #425e50;   color: #f9f6ce;   border-top: 3px solid #f9f6ce;   box-shadow: 0px 0px 15px #f9f6ce; }

#footer a, #footer .heading {   color: #f9f6ce; }

.actions a, .actions a:focus, .actions input:focus, .action:focus, .actions li input, .actions li input[type="submit"], input[type="submit"], .actions li label, ul.navigation.actions li a, .action:link, .actions a:link {   background: #425e50;   border: 1px solid #f9f6ce;   color: #f9f6ce;   box-shadow: 0px 0px 15px #f9f6ce;   border-radius: 5px; }

.current, #dashboard .current {   background: #f9f6ce !important;   color: #0d1d1f !important;   box-shadow: 0px 0px 15px #f9f6ce !important;   border-radius: 5px; }

#dashboard.own {   border-top: 5px solid #f9f6ce;   border-bottom: 5px solid #f9f6ce;   box-shadow: 0px 0px 15px #f9f6ce; }

#dashboard a:hover {   background: #0d1d1f;   box-shadow: 0px 0px 15px #f9f6ce; }

#dashboard a {   color: #f9f6ce; }

dl.meta {   border: 1px solid #f9f6ce;   box-shadow: 0px 0px 15px #f9f6ce; }

.listbox .index {   background: #0d1d1f; }

.listbox, fieldset fieldset.listbox {   background: #f9f6ce;   box-shadow: 0px 0px 15px #f9f6ce; }

form dl, fieldset, fieldset fieldset, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff, input, select, select:focus, textarea, span.symbol.question, .own {   background: #0d1d1f !important;   color: #f9f6ce !important;   border: 1px solid #f9f6ce;   box-shadow: 0px 0px 15px #f9f6ce; }

.autocomplete li.added, .post .meta dd ul li.added, label, label.required {   color: #f9f6ce; }

span.delete {   background: #f9f6ce;   box-shadow: 0px 0px 15px #f9f6ce; }

span.delete a {   color: #0d1d1f !important;   font-weight: bold; }

.ui-sortable li, .dynamic form, div.dynamic {   background: #0d1d1f;   border: 1px solid #f9f6ce; }

.dropdown {   background: #0d1d1f; }

form.verbose legend, .verbose form legend {   background: #f9f6ce;   color: #0d1d1f;   box-shadow: 0px 0px 15px #f9f6ce; }

li.blurb {   border: 1px solid #f9f6ce;   box-shadow: 0px 0px 15px #f9f6ce; }

.draft {   background: #0d1d1f;   color: #f9f6ce;   border: 2px dashed #f9f6ce;   box-shadow: 0px 0px 15px #f9f6ce; }

.draft .wrapper {   background: #0d1d1f;   border: 1px solid #f9f6ce; }

#header h2 {   background: #f9f6ce !important;   color: #0d1d1f;   box-shadow: 0px 0px 15px #f9f6ce; }

#stat_chart svg rect:first-of-type {   opacity: 60%; }

#stat_chart g[clip-path^=url] > g:nth-of-type(2) rect, #stat_chart svg g:nth-of-type(2) > g rect:last-of-type, #stat_chart g[clip-path^=url] > g:nth-of-type(2) rect:first-of-type {   filter: hue-rotate(140deg);   opacity: 80% !important; }

.statistics .index li:nth-of-type(2n) {   background: #0d1d1f;   border: 1px solid #f9f6ce; }

.reading h4.viewed, dl.index dd, table, th, dt.child {   background: #0d1d1f; }

#modal, span.replied {   background: #0d1d1f;   color: #f9f6ce;   border: 2px solid #f9f6ce;   box-shadow: 0px 0px 15px #f9f6ce; }

h4.heading.byline {   background: #f9f6ce;   color: #0d1d1f; }

li.comment {   border: 1px solid #f9f6ce; }

.comment div.icon {   border-bottom: 5px solid #f9f6ce;   box-shadow: 0px 0px 15px #f9f6ce; }

.thread .even {   background: #425e50; }

.unread {   background: #0d1d1f;   border: 5px dashed #f9f6ce !important; }

span.unread {   background: #f9f6ce;   color: #0d1d1f; }

span.indicator::before {   box-shadow: 0px 0px 15px #f9f6ce; }

.warnings .tag, .work .warning a.tag, dd.warning.tags a {   border: 1px solid #f9f6ce;   border-radius: 5px;   background: #f9f6ce;   padding-left: 2px;   padding-right: 2px;   box-shadow: 0px 0px 10px #f9f6ce; }

.relationships .tag, .work .relationships a.tag, dd.relationship.tags a {   background: none;   color: #f9f6ce !important;   font-weight: bold;   text-shadow: 0px 0px 15px #f9f6ce; }

.filters .expander {   background: url("https://64.media.tumblr.com/3c89981f933f9f57157d6dcec6fd85a7/94c6737c6db9ad60-e5/s1280x1920/f7557e617a5439c506721bd326580a0cb4c1f8d8.png") left center no-repeat;   color: #f9f6ce !important;   font-weight: bold; }

.filters .expanded .expander {   background: url("https://64.media.tumblr.com/dab095a2fd9387bc1e0c57747ba6b13f/94c6737c6db9ad60-ad/s1280x1920/c1a4e14e0565cdcac5d3e20bebac3ab440f2d607.png") left center no-repeat; }

[thedevilsfamiliar]

This is for the ao3 users who enjoy color or prefer non-white backgrounds

There is a TikTok user who made a tutorial of how to make your ao3 colorful, I’ll link her profile down below cuz she has MANY diff skin tutorials

Here is her tutorial, here is her link to her page.

These are two that caught my attention, but that’s cuz I need darker colors, she has a lot of pretty and colorful themes for y’all to check out!

Enjoy!

And thank you @cloudysao3 (her TikTok and Instagram handle)

[fightingformetaphor]

After toiling for hours in firefox’s inspect window I finally managed to make my AO3 look pretty!!!! I’m actually in love with how brought the colours turned out, even if they’re a little less vibrant on my laptop.

I used base code from @ao3commentoftheday’s glowy skin and some other misc code to change the highlight colours on tags, hide stats from my own works, and hide non-english works, as well as changed the colours pretty massively to fit my pretty Firefox theme (as well as added this stunning gif from the space bar [I found the artist by the way, it's kirokaze!]).

Really random but a huge thank you to all the skin makers out there making code for free! Truly an art I didn’t appreciate enough before this.

Here's the code for this bad boy in case anyone else is interested in my silly little project!!! I don't actually know how to code CSS so if anything is bright blue or doesn't work please let me know, I'll... I'll figure it out.

[erinwantstowrite]

begging people to look more into ao3 skins. mostly because they're fun and also because they happen to solve some of your problems (example: i know when i've read a fic before because it darkens the title of the fic like other links)

[sugaredrhubarb]

A QUICK GUIDE TO AO3 CUSTOMIZATION FROM SOMEONE WHO KNOWS NOTHING ABOUT CODING

ft adding pink to everything and my secret to writing long comments

note: I originally posted this to twt but if that place burns in a fiery pit I spent too long on this for it to disappear, so I'm putting it here too :)

so many people know way more about this than I do, but this is a step-by-step walkthrough of the changes *I've* made, and hopefully it works as an introduction people can build from for whatever they'd like to do

There are a lot of images in this post! (click to enlarge)

to start, AO3 skins

site skins change how the AO3 website appears when logged in (even on mobile), mine is pink and blue!

I'll have my skin turned off throughout the post so the guides appear as they will for you

to create, edit, and view skins, go to the "skins" tab from the left-hand menu. you can also view public site skins from there or from the button in the preferences.

public site skins are made by other users. i would really encourage previewing and exploring them to become familiar with the possibilities (maybe you just want to use one of them and now you're done!)

to create your own skin

on the skins page, click "create site skin"

if you don't know CSS (same), use the wizard! clicking on the "?" will give more information about each option

I only use the colours section you'll see a link right there for hex codes I use pink as a header colour and bue for accent but lots of people change the background colour and that looks really cool!

submit

The next step (optional!!!) is to add CSS from a public skin to your own. I use "ByLine" by Branch. this separates the tag categories and adds spacing to make them easier to read.

here is a before and after using the fic "Landslide" by @roosterbruiser as an example

to see the CSS of a skin, click the title

copy all the text below the CSS heading

in the skin creator/editor press the custom CSS option and paste all the text into the CSS box

you can have both wizard and custom CSS settings, in mine you can see the header and accent colours as well as the CSS

level up: USERSCRIPTS

userscripts are small pieces of code that modify a website. for AO3, this may involve adding shortcuts and buttons or even advanced tagging functions (computer people, I'm so sorry if this is wrong, I'm trying). I use Greasy Fork and Tampermonkey.

This is how I write long and formatted comments!

Greasy Fork is an archive of userscripts and Tampermonkey is a browser extension and userscript manager. You don't need to use these two in particular. please use your common sense when downloading anything or adding permissions to your browser.

Greasy Fork guide on installing scripts

Install Tampermonkey on Chrome

there are TONS of user scripts for AO3. This is another good opportunity to explore all the possibilities. there are lots of more complicated options I haven't explored.

scripts for AO3

i use this floaty review box

and this comment formatting

EDIT: if you use chrome you might need to turn on developer mode in your chrome extension manager - you can google "tampermonkey developer mode" and it should explain that :)

to install (once you have Tampermonkey installed):

open the script you want in Greasy Fork and press install

Tampermonkey will open, press install again

clicking the Tampermonkey extension will let you toggle scripts on and off, and opening the dashboard will let you view, edit, and delete scripts

i find i can only have a few turned on at a time before they cancel each other out, but that depends on which ones you're using and someone more savvy might be able to fix that

how to use the floaty review box - write more comments!

there will now be a "floaty review box" button at the top of the work, it will open a floating text box you can move anywhere on the page. highlighting any text and pressing the insert button will paste the text with italics into the box

anything you type in the review box will appear in your comment at the bottom of the page!

if you have also installed the comment formatting script, you'll be able to highlight any text in your comment and use the new buttons above the comment box to format it

thats all ive got! Hopefully this is a good starting point to get familiar with some of the terms and basics for skins and scripts <3

if you want some inspo for how to comment on fics i made a whole fic rec list on twitter based on comments I've left, it's here. i have a masterlist of recs there mostly for darklina/reylo and similar ships.

the tag #reading with ru has cod recs and me talking about books

:)

[phvnthom]

For everyone who wants this beautiful AO3 site skin by tealtiam but just slightly altered, here is the code in the form of a Google doc.

I didn't know what else to use as an example so I just used my own fic 😅

✨ Original:

🌙 My slight alterations: the font for all the buttons at the top are now exactly the same. The stats icons have been changed into minimalist designs from @ao3skin's skin.

The body text has been scaled down to fit smaller screens by instead following the font size you already have set up on your own device (for the ".userstuff p { font-size" on the second line of the google doc, 100% on the body text didn't work for me in getting it back to the default font size of my device, so I changed it to 10pt. However, this might be too small for you so I suggest playing around with the font size until you're happy with it or just reverting it back to 100%).

And lastly, the font for the title/chapter titles of fics have been reverted back to the original formatting instead of being in all caps lock— everything else in the site skin has remained unaltered. The different colored tags for archive warnings, relationships, characters, and tags will still be there when searching for fics. Though I personally love it, you might not, so take that into account!!!! 🥰

[achillesuwu]

Well guess I made it even more yellow (code below !)

#footer .group,

.post fieldset fieldset,

fieldset fieldset {

background: none;

}

#header {

background: #000 url('https://media.archiveofourown.org/news/milestones/2024-08-seventeen-years-otw/2024-08-seventeen-years-otw-pattern.jpg');

background-size: 350px;

}

#header .heading a,

#header .primary .dropdown a:focus,

#header .heading a:visited,

#main .pagination .current,

h2 {

color: #ffe8b4;

}

#header .clear,

#footer {

border-color: #000000;

}

#header .actions a[href="/menu/fandoms"],

#header .actions a[href="/menu/browse"],

#header .actions a[href="/menu/search"],

#header .actions a[href="/menu/about"] {

color: #DEB887;

}

#footer ul {

background: url('https://live.staticflickr.com/7284/9616997915_4194b6c6f7_h.jpg');

background-size: 350px;

}

#footer ul li:nth-child(1) ul,

#footer ul li:nth-child(2) ul,

#footer ul li:nth-child(3) ul,

#footer ul li:nth-child(4) ul {

background: rgba(0, 0, 0, 0.0);

}

#header .primary {

background: #8a1a10;

}

#footer {

background: #8a1a10;

}

input[type="text"],

textarea,

select {

background: #191919;

color: #DEB887;

}

select:focus {

background: #2a2a2a;

}

option {

background: #191919;

color: #DEB887;

}

#work form fieldset.work.meta dl dd.warning.required fieldset,

#main form fieldset.work.meta dl dd.warning.required fieldset {

color: #DEB887;

}

#bookmark-form form {

background: #2a2a2a;

color: #DEB887;

}

#error {

color: #000000;

}

fieldset,

.verbose fieldset {

border-color: #404040;

background: #000000;

border: 1px solid #595959;

}

.search [role=tooltip] {

background: #333;

border: 1px solid #666;

}

#main a:visited {

color: #c88937;

}

#main a.tag:visited:hover {

color: #111;

}

body,

.group,

.group .group,

.region,

.flash,

form dl,

#main .verbose legend,

.notice,

ul.notes,

table,

th,

td:hover,

tr:hover,

.symbol .question:hover,

#modal,

.ui-sortable li,

.required .autocomplete,

.autocomplete .notice,

.system .intro,

.comment_error,

.kudos_error,

div.dynamic,

.dynamic form,

#ui-datepicker-div,

.ui-datepicker table {

background: #000000;

color: #FFE4B5;

border-color: #800000;

outline: #111;

box-shadow: none;

}

#header .actions a:hover,

#header .actions a:focus,

#header .dropdown:hover a,

#header .open a,

#header .menu,

#small_login,

.group.listbox,

fieldset fieldset.listbox,

.listbox,

form blockquote.userstuff,

input:focus,

textarea:focus,

li.relationships a,

.group.listbox .index,

.dashboard fieldset fieldset.listbox .index,

#dashboard a:hover,

th,

#dashboard .secondary,

.secondary,

.thread .even,

.system .tweet_list li,

.ui-datepicker tr:hover {

background: #191919;

}

a,

a.tag,

a:link,

#header a:visited,

#header .primary .open a,

#header .primary .dropdown:hover a,

#header #search input:focus,

#header #search input:hover,

.userstuff h2,

#dashboard a,

#dashboard span,

#dashboard .current,

.group .heading,

.filters dt a:hover {

color: #DEB887;

}

#header .dropdown .menu a:hover,

#header .dropdown .menu a:focus,

.splash .favorite li:nth-of-type(odd) a,

.ui-datepicker td:hover,

#tos_prompt .heading,

#tos_prompt [disabled] {

background: #111;

color: #ffe8b4;

}

#outer,

.javascript,

.statistics .index li:nth-of-type(even),

#tos_prompt,

.announcement input[type="submit"] {

background: #000000;

}

#dashboard ul,

dl.meta,

.group.listbox,

fieldset fieldset.listbox,

#main li.blurb,

form blockquote.userstuff,

div.comment,

li.comment,

.toggled form,

form dl dt,

form.single fieldset,

#inner .module .heading,

.bookmark .status span,

.splash .news li,

.filters .group dt.bookmarker {

border-color: #2a2a2a;

}

.group.listbox,

fieldset fieldset.listbox,

#main li.blurb,

.wrapper,

#dashboard .secondary,

.secondary,

form blockquote.userstuff,

.thread .comment,

.toggled form {

box-shadow: 1px 1px 3px #000;

}

#dashboard .current,

.actions a:active,

a.current,

.current a:visited,

span.unread,

.replied,

span.claimed,

dl.index dd,

.own,

.draft,

.draft .unread,

.child,

.unwrangled,

.unreviewed,

.ui-sortable li:hover {

background: #000;

border-color: #191919;

box-shadow: -1px -1px 3px #000;

}

input,

textarea {

box-shadow: inset 0 1px 2px #000;

}

li.blurb,

.blurb .blurb,

.listbox .index,

fieldset fieldset.listbox,

.dashboard .listbox .index {

box-shadow: inset 1px 1px 3px #000;

}

#footer a:hover,

#footer a:focus,

.autocomplete .dropdown ul li:hover,

.autocomplete .dropdown li.selected,

a.tag:hover,

.listbox .heading a.tag:visited:hover,

.symbol .question {

background: #ffedc5;

border-color: #988352;

color: #111;

}

#header #greeting img,

#header .user a:hover,

#header .user a:focus,

#header fieldset,

#header form,

#header p,

#dashboard a:hover,

.actions a:hover,

.actions input:hover,

.delete a,

span.delete,

span.unread,

.replied,

span.claimed,

.draggable,

.droppable,

span.requested,

a.work,

.blurb h4 a:link,

.blurb h4 img,

.splash .module h3,

.splash .browse li a:before,

.required,

.error,

.comment_error,

.kudos_error,

a.cloud7,

a.cloud8,

#tos_prompt .heading {

color: #ffe8b4;

}

#greeting .icon,

#dashboard,

#dashboard.own,

.error,

.comment_error,

.kudos_error,

.LV_invalid,

.LV_invalid_field,

input.LV_invalid_field:hover,

input.LV_invalid_field:active,

textarea.LV_invalid_field:hover,

textarea.LV_invalid_field:active,

.qtip-content {

border-color: #8a1a10;

}

.splash .favorite li:nth-of-type(odd) a:hover,

.splash .favorite li:nth-of-type(odd) a:focus .splash .favorite li:nth-of-type(odd) a:visited:hover,

.splash .favorite li:nth-of-type(odd) a:visited:focus {

background: #ffe8b4;

color: #111;

}

a:visited,

.actions a:visited,

.action a:link,

.action a:visited,

.listbox .heading a:visited,

span.series .divider {

color: #BC8F8F;

}

.actions a,

.actions a:link,

.action,

.action:link,

.actions input,

input[type="submit"],

button,

.current,

.actions label,

#header .actions a,

#outer .current {

background: #191919;

border-color: #222;

color: #eee;

box-shadow: inset 0 -8px 4px #232323, inset 0 8px 7px #191919;

text-shadow: none;

}

.actions a:hover,

.actions input:hover,

#dashboard a:hover,

.actions a:focus,

.actions input:focus,

#dashboard a:focus,

.actions .disabled select {

color: #999;

border-color: #000;

box-shadow: inset 2px 2px 2px #000;

}

.actions a:active,

.current,

a.current,

.current a:visited {

color: #DEB887;

background: #191919;

border-color: #DEB887;

box-shadow: inset 1px 1px 3px #000000;

}

.delete a,

span.delete {

box-shadow: -1px -1px 2px rgba(255,255,255.25);

}

.actions label.disabled {

background: #222;

box-shadow: none;

}

ul.required-tags,

.bookmark .status span,

.blurb .icon {

opacity: 0.9;

border: 0;

}

#outer .group .heading,

#header .actions a,

fieldset.listbox .heading,

.userstuff .heading {

text-shadow: none;

color: #DEB887;

background: none;

}

#header .actions a,

fieldset fieldset,

.mce-container button,

.filters .expander,

.actions .disabled select {

box-shadow: none;

}

fieldset fieldset.listbox {

outline: none;

}

form dd.required {

color: #eee;

}

.mce-container input:focus {

background: #F3EFEC;

}

.announcement .userstuff a,

.announcement .userstuff a:link,

.announcement .userstuff a:visited:hover {

color: #111;

}

.announcement .userstuff a:visited {

color: #666;

}

.announcement .userstuff a:hover,

.announcement .userstuff a:focus {

color: #999;

}

.event.announcement .userstuff a,

.filters .expander {

color: #eee;

}

[adiraofthetals]

Kitty Bell's AO3 Skin!

@ivylor You asked for my AO3 skin code! I don't really know code either but I know what's vaguely happening. So I don't know where I got the main code originally but I do know that I got the stats icon code from (here). Then I think I picked bits and pieces from other places. I would like to mention I have code in there to remove buttons. This prevents me from accidentally deleting my fics. Still working on some of those pieces. If you want to delete a fic you will have to turn off the skin. Also, Ivylor you could have commented on the post, you didn't have to msg me. I thought you were a bot tbh. For next time ig. Also meant to make this earlier sorry for making you wait!

Anyways! Photos of my AO3 skin!

Code down below! WARNING THIS CODE IS VERY LONG:

Edit: If you ever need help with the skin please contact me! I will be very happy to help!

Edit Edit: SO I made a pastebin so you all can click copy so you can paste it easier in AO3! https://pastebin.com/28Ah7QMs. Again if you have troubles with the skin please don't be afraid to contact me.

div#main.profile-show.dashboard.region ul.navigation.actions li:nth-child(5) { display: none !important; }

div#main.works-edit.region ul.navigation.actions li:nth-child(2), div#main.works-edit.region ul.navigation.actions li:nth-child(3) { display: none !important; }

div#main.works-show_multiple.dashboard.region p.submit input:nth-child(2), div#main.works-show_multiple.dashboard.region p.submit input:nth-child(3) { display: none !important; }

div#main.series-show.region ul.navigation.actions li:nth-child(2) { display: none !important; }

div#main.series-show.region ul.navigation.actions li:nth-child(4) { display: none !important; }

.works-edit .navigation.actions li a[href*="orphans"] { display: none; }

.works-edit .navigation.actions li a[href*="delete"] { display: none; }

.actions a[href*="toggle_rejected"] { display: none; }

header {

background-image: url("https://i.imgur.com/MEXgrDx.png"); background-repeat: repeat; }

header .heading {

height: 12em; }

header .logo,

header h1 sup {

display: none; }

header .heading a {

padding-left: 1em; font-variant: small-caps; color: #a6894b; }

greeting .icon img {

box-shadow: none; border: 1px solid #fff; border-radius: 90%; }

greeting .dropdown .menu,

greeting .dropdown .menu a,

greeting li a {

font-variant: small-caps; color: #a6894b !important; background: #f7f2e9 !important; border: none; box-shadow: none; }

greeting .dropdown .menu a:hover,

greeting li a:hover,

a.tag:hover { background: #c8d0c1 !important; color: #fff; }

greeting .menu {

width: 12em; }

header .menu {

background: #f7f2e9; box-shadow: none; width: 20em; }

header .primary li:not(.search),

greeting li {

border: none; }

header #search {

display: none; }

header .primary {

background: #c8d0c1; box-shadow: none; border-bottom: 5px solid #d5b56e; border-top: 5px solid #d5b56e; }

header .dropdown .menu li:hover a,

header .primary li a {

font-variant: small-caps; color: #f7f2e9 !important; background: #d5b56e; border: none; box-shadow: none; }

header .dropdown:hover a,

header .primary li:not(.search) {

background: #a5b399; }

outer.wrapper {

background: #f7f2e9; }

.actions a, .action, input[type="file"], .actions input, input[type="submit"], button, .actions label,

main .actions a,

main .actions a:visited,

main .action,

main .actions input,

main input[type="submit"],

main button,

main .actions label {

background: #d5b56e; font-variant: small-caps; color: #fff; border: none; }

dashboard .actions a,

dashboard .actions a:visited {

background: #f7f2e9; border: 1px solid #d5b56e; color: #a6894b !important; font-variant: small-caps; }

.required .autocomplete, p.notice, .notice, .comment_notice, .kudos_notice, ul.notes, .caution, .error, .comment_error, .kudos_error, .alert.flash { background: #c8d0c1; }

.current,

dashboard .current,

main .current {

background: #a5b399; color: #fff; font-variant: small-caps; border: none; }

input[type="submit"]:hover, input[type="submit"]:focus,

dashboard .actions a:hover,

dashboard .actions a:focus,

main .actions a:hover,

main input[type="submit"]:hover,

main button:hover .actions label:hover,

main .action:hover {

box-shadow: none; text-shadow: none; border: none; background: #f7f2e9; color: #a5b399; font-weight: bold; }

main a {

color: #a6894b; }

main a:visited {

color: #76826c; }

a.tag:visited { color: #a6894b !important; }

h1, h2, h3, h4, h5, h6, .heading { font-variant: small-caps; color: #d5b56e; }

.splash .module h3 { color: #a5b399; font-variant: small-caps; }

.splash .favorite li:nth-of-type(odd) a { background: none; }

fieldset { background-image: url("https://i.imgur.com/MEXgrDx.png"); background-repeat: repeat; border: 2px solid #d5b56e; box-shadow: none; }

fieldset dl, fieldset fieldset { background: #f7f2e9; color: #a6894b !important; font-variant: small-caps; border: 2px solid #d5b56e; box-shadow: none; }

input, textarea { background: #f7f2e9; border: 2px solid #d5b56e; box-shadow: none; }

span.question { background: #d5b56e; color: #fff; box-shadow: none; border: none; }

form.verbose legend, .verbose form legend { background: #f7f2e9; border: 2px solid #d5b56e; color: #a6894b; font-variant: small-caps; box-shadow: none; }

select { background: #f7f2e9; border: 1px solid #d5b56e; }

modal {

border: 5px solid #d5b56e; background: #f7f2e9; color: #76826c; }

modal .footer .action.modal-closer {

background: #d5b56e; color: #fff; border: none; box-shadow: none; }

.listbox, fieldset fieldset.listbox { background: #d5b56e; border: 2px solid #d5b56e; font-variant: small-caps; }

.listbox > .heading, .listbox > .heading a { color: #fff !important; }

.listbox > .heading a:visited { color: #76826c; }

.listbox .index { background: #f7f2e9; box-shadow: none; }

.listbox li.blurb { border: none; }

li.blurb { border: 2px solid #d5b56e; }

li.relationships a, .work .relationship a.tag { background: none; }

ol.index.group { background: #f7f2e9; }

div.comment, li.comment { border: 2px solid #d5b56e; }

.comment div.icon { border: none; }

.comment h4.byline, .comment h4.byline a { background: #d5b56e; color: #fff !important; }

.unread, .thread .even, .statistics .index li:nth-of-type(2n) { background: #c8d0c1; }

span.unread { background: #f7f2e9; color: #a6894b; border: 2px solid #d5b56e; }

.comment .icon .anonymous, .comment .icon .visitor, .index .skins .icon, .skins .primary .icon, .index .mystery .icon, .index .tag .icon, .index .tagset .icon, .abbreviated .icon .anonymous, .abbreviated .icon .visitor { background: url("https://i.imgur.com/rdqdtqz.png"); background-repeat: no-repeat; background-size: contain; border: 1px solid #d5b56e; }

a img { border-radius: 95%; border: 2px solid #fff; }

p.kudos { background: url("https://i.imgur.com/7wX03zP.png") no-repeat; }

p.kudos { color: #a6894b !important; }

dashboard.own {

background-image: url("https://i.imgur.com/MEXgrDx.png"); border: 2px solid #d5b56e; }

dashboard ul {

border: none; }

main.errors,

main.error-502,

main.error-503-maintenance {

background: url("https://i.imgur.com/FxUVd04.png") center right no-repeat; }

footer {

border-top: 5px solid #d5b56e; }

footer.region {

background: #c8d0c1; }

footer h4.heading {

color: #fff; font-variant: small-caps; font-size: 120%; }

footer,

footer a {

color: #fff; }

footer a:hover {

color: #fff; background: #d5b56e; }

dl.stats dt { display: none; }

.skins .header dl.stats dt { display: inline-block; }

dl.stats dd:nth-of-type(1)::before { background: url(https://64.media.tumblr.com/db492b00dffe5c3059151bf531bac9ea/270ee5afe68cadd6-46/s500x750/a6bc3e5d57023d005da4a1f3d11c383db8dd7df6.png); }

dl.stats dd:nth-of-type(2)::before { background: url(https://64.media.tumblr.com/f835b437a474b4b672a8d4ebe61402b8/8979adde76f2ff05-fb/s100x200/8f86556b6896e96427f5a4a54f0de7be38ddba75.png); }

dl.stats dd.language::before { display: none !important; }

dl.stats dd.kudos::before { background: url(https://64.media.tumblr.com/23a3c6f134a96386f50fb8982a353590/8b704f26c7323545-01/s100x200/31e25f0be03646918168c4d49bd2ee9733b2cd59.png); }

dl.stats dd.words::before { background: url(https://64.media.tumblr.com/fff96d500a04ddf12517a48d83b228d2/b2e751421a20aa0c-a7/s100x200/c848a67de8f463ccdafa5b60948c61a172d5fe24.png); }

dl.stats dd.chapters::before { background: url(https://64.media.tumblr.com/a8ca48310f24581ae539336583690b26/b2e751421a20aa0c-5c/s100x200/a51b914598b64c3ddf6f705b278f11a68301d443.png); }

dl.stats dd.comments::before { background: url(https://64.media.tumblr.com/7172c0bbe03a0eef7b236014dc78c905/8b704f26c7323545-78/s250x400/f37ba1ff69b5ef2ad7e5fe66b61fd748badc00d1.png); }

dl.stats dd.bookmarks::before, dl.stats dd a[href$=bookmarks]::before { background: url(https://64.media.tumblr.com/9b95d189a57699762d2262536e922ece/b2e751421a20aa0c-2a/s100x200/1aabb2ad7b90746f0469aefaa39af5b83728f8b9.png); }

dl.stats dd.hits::before { background: url(https://64.media.tumblr.com/b2b8862a356132ac1aa41e9e9f0ddd1d/b2e751421a20aa0c-9e/s100x200/dcd2bcb1adbbb8f9e1844b61aee3dd3a653531e3.png); }

dl.stats dd.collections::before { background: url(https://64.media.tumblr.com/ae825c2ad8071426c298c5b52970e294/b2e751421a20aa0c-18/s100x200/d1eb5dd259e2db588cda2100057c2c8fd9efaaf0.png); }

dl.work dl.stats dd.published::before { background: url(https://64.media.tumblr.com/7e13419071a7eeb35f48a76c7aa0ba36/b2e751421a20aa0c-5d/s250x400/7f351f60793ad683e4a9dc4de55e4ee4d625f9d2.png); }

dl.work dl.stats dd.status::before { background: url(https://64.media.tumblr.com/0ef9349a36cf808783e9488a97b64678/b2e751421a20aa0c-10/s250x400/8df1d3da298f875381822968f8e71ed4d7bcae31.png); }

ul.statistics dl.stats dd.subscriptions::before { background: url(https://64.media.tumblr.com/64db76a65209eff79515dfc23842eb54/fd0b10e0262ddb71-14/s250x400/921de73c3d5bb819f4e3c58c7c45bd4c6edfe55f.png); }

dl.stats dd.published::before, dl.stats dd.status::before { width: 0px; margin-right: 0px; }

li.collection dl.stats dd a[href$=collections]::before { background: url(https://64.media.tumblr.com/ae825c2ad8071426c298c5b52970e294/b2e751421a20aa0c-18/s100x200/d1eb5dd259e2db588cda2100057c2c8fd9efaaf0.png); }

li.collection dl.stats dd a[href$=works]::before { background: url(https://64.media.tumblr.com/f835b437a474b4b672a8d4ebe61402b8/8979adde76f2ff05-fb/s100x200/8f86556b6896e96427f5a4a54f0de7be38ddba75.png); }

li.collection dl.stats dd a[href$=bookmarks]::before { background: url(https://64.media.tumblr.com/9b95d189a57699762d2262536e922ece/b2e751421a20aa0c-2a/s100x200/1aabb2ad7b90746f0469aefaa39af5b83728f8b9.png); }

li.collection dl.stats dd a[href$=fandoms]::before { background: url(https://64.media.tumblr.com/0a2f3d28fb850907a859726916e04e6f/8979adde76f2ff05-48/s250x400/926b1499363f66438d02fdc8bbea5ce610a75395.png); }

ul.statistics dl.stats dd::before, li.work dl.stats dd::before, li.bookmark dl.stats dd::before, dl.work dl.stats dd::before, .collection dl.stats dd a[href$=collections]::before, li.collection dl.stats dd a[href$=works]::before, li.collection dl.stats dd a[href$=bookmarks]::before, li.collection dl.stats dd a[href$=fandoms]::before, li.series dl.stats dd:not(.language):not(.words):not(.chapters):not(.collections):not(.comments):not(.kudos):not(.bookmarks):not(.hits):not(.published):not(.subscriptions):nth-of-type(1)::before, li:not(.collection) dl.stats dd:not(.language):not(.words):not(.chapters):not(.collections):not(.comments):not(.kudos):not(.bookmarks):not(.hits):not(.published):not(.subscriptions):nth-of-type(2)::before, dl.stats dd:not(.bookmarks) a[href$=bookmarks]::before { display: inline-block; width: 14px; height: 14px; content: " "; background-size: 14px 14px !important; margin-right: 5px; }

[zerafinacss]

Replace the AO3 Icons 2.0

A while ago, I made a site skin that replaces all of the AO3 icons with new ones. I was pretty happy with it, but I wanted more options for changing the colors of the icons. So I made a new skin with customizable colors!

Here are preview images for the two example color schemes I created (default and reversi blue):

Almost all icon background colors (and a few other ones) can be changed to any color you want!

Find instructions for adding and customizing the site skin here on AO3:

[transformativeworks]

Were you using the OTW 17th Anniversary Skin?

Do you miss it? Would you like to make it your own? GOOD NEWS!

OTW Comms has posted the CSS and links to instructions on how to use it here on AO3 - https://archiveofourown.org/works/61170658

Go forth and customize your fic reading experience!

~ Mod Remi

[cosmosbuilder]

have you ever been on ao3 and thought to yourself "man i wish my ao3 looked more like one of the magic schools from the hit mmorpg wizard101..."

well now it can!!

"but cosmos!" i hear you say "what if i want my ao3 to look like one of the astral schools! or shadow magic!"

don't worry

i got you covered

so if you were wanting to use a wizard101 themed site skin here you go!

the code originated and was slightly edited from tealtiam's teal skin with stars as well as ao3commentoftheday's glowy dark mode skin for the faint glow. here's a google doc with links to the CSS's and a (probably bad) installation guide!

EDIT: i made some pirate101 skins to go along with them that you can also find on the google doc :} EDIT 2: made a part 2 to these skins!!!!

[dannychai1617]

ao3 skin that i made!! (copy code under "keep reading")

it's a messy combination of pieces of code from other people's skins and my own changes

the header image is NOT MINE! it is "Pattern Galaxy Space Planets Vibrant Linear Universe" by Arncil on Redbubble, which i just used as an example for an image you could use!

here are some of the skins that i can remember using as part of this, but i've been building it for years so forgive me if i forget some:

Shortening long tag fields by Xparrot (on ao3)

Slim Shaded by AO3 (on ao3)

Lily Garden by tealtiam (on Tumblr)

AO3 Tag category coloring! by ao3css (on Tumblr)

come back here to my tips or leave a comment if you need some help customizing the code!

Background color: #26303C

Text color: #CBC6C3

Header color: #46626D

Accent color: #993F33

steps to create a new skin using this code:

log into ao3 account

go to dashboard >> skins

click "create site skin"

make sure TYPE is "site skin"

add a unique title

copy all code below

paste into field 'CSS'

click on "use wizard" at the top

copy and paste the four colors written above into their corresponding boxes

click SUBMIT

click USE

how to customize this skin:

FONT SIZE: at the very top of the code, change the "90%" to be bigger or smaller to change the font size within a fic

MAIN COLORS: to change the main colors, select "use wizard" when editing the skin and replace any of the four hex codes under "Background color:", "Text color:", "Header color:", and "Accent color:"

SECONDARY COLORS: find all hex codes within the code and change those numbers as you like! i changed all colors to match with the color palette of the header photo that i chose to make it feel cohesive

TAG COLORS: towards the end, the "relationship", "character", and "freeform" tags alternate three colors to make them easy to separate. in this skin they are all very similar, so you can change those to be whatever colors you like!

HEADER PHOTO: find the link towards the end of the code right before the warning tags and replace it with a link to any photo you like! it loops, so you don't have to worry about sizing or anything

FONT: i'm unsure how exactly to do this, but the in-fic font is currently set to Georgia Serif, so i suppose just go find that and replace it with your preferred font!

BORDER STYLES: wherever you see the code "border-style:", replace the word that comes after it with one of these options: none, solid, dashed, dotted, double, groove, ridge, inset, outset, or hidden

WARNING TAGS: at the very end of the code is a list of words or phrases that, when they appear in the tags of a fic, are highlighted in a contrasting color so that they are easy to avoid if necessary. you can add or remove those tags however you like, or change the warning color!

COPY AND PASTE ALL CODE BELOW

#workskin { font-size: 90%; } li.blurb .tags { max-height: 7.5em; overflow-y: auto; } #header { min-height: 0; } #header a, #header fieldset, #header ul.primary, #header ul.primary .current { border: 0; background: 0; } h1 a img { height: 50px; border: 0; } #header .landmark { clear: none; } #header ul.primary { background: rgba(0,0,0,0.65); border-bottom: 1px solid rgba(0,0,0,0.75); } #header ul.primary, #header ul.primary .current, ul.primary.actions a, #header ul.primary .current { color: #CBC6C3; } #header ul.primary .current, #header #search input, #header #search input:focus { background: rgba(0,0,0,0.25); color: #CBC6C3; box-shadow: inset 0 0 3px #131A2A; border-color: #131A2A; } .actions, .actions input { text-transform: lowercase; } blockquote.userstuff { font-family: "Mido", "AUdimat", "Ostrich Sans Rounded","Lucida Grande", sans-serif !important; position: relative; background: rgba(0,0,0,0.1); padding: 2%; border: 1px solid rgba(0,0,0,0.15); box-shadow: 0 0 2px rgba(0,0,0,0.4); } blockquote.userstuff:after { content: "\201D"; right: 0; top: auto; left: auto; } body, .userstuff { font-family: Mido, Georgia, serif; } .heading, .userstuff h3, .userstuff h4 { font-family: "CabinSketch", Georgia,serif; } #main .heading { color: #CBC6C3; } #inner .group, #inner .heading, fieldset, .verbose legend, table, table th, col.name, span.unread, span.replied { outline: none; background: transparent; border-color: #131A2A; border-style: double; box-shadow: none; border-radius: 2em; border-bottom-right-radius: 0; border-top-left-radius: 0; } #inner .group .group .group, col.name { border-style: double; border-color: #CBC6C3; box-shadow: 0 0 2px #000; } #inner .bookmark .user.module, #inner .wrapper { border: 0; border-radius: 0; border-top: 3px double #bbb; box-shadow: none; } .filters { font-size: 90%; } .toggled form, .dynamic form, .secondary, .dropdown { background: #fff url("/images/skins/textures/tiles/white-handmade-paper.jpg"); } a.tag, a.tag:visited, a.tag:link { display: inline-block; padding: 1px 3px; margin: 2px 0px; border: 2px solid #46626D; border-radius: 5px; } .commas li:after { content: ""; } h5.fandoms.heading { color: transparent; } .favorite a.tag { border: none; } .tags li.relationships:nth-of-type(3n+1) a.tag { background-color: #1d3954; } .tags li.relationships:nth-of-type(3n+2) a.tag { background-color: #264663; } .tags li.relationships:nth-of-type(3n+3) a.tag { background-color: #305475; } .tags li.characters:nth-of-type(3n+1) a.tag { background-color: #214154; } .tags li.characters:nth-of-type(3n+2) a.tag { background-color: #294c61; } .tags li.characters:nth-of-type(3n+3) a.tag { background-color: #31576e; } .tags li.freeforms:nth-of-type(3n+1) a.tag { background-color: #234e54; } .tags li.freeforms:nth-of-type(3n+2) a.tag { background-color: #2a585e; } .tags li.freeforms:nth-of-type(3n+3) a.tag { background-color: #316269; } .tags li.freeforms a.tag:hover, .tags li.characters a.tag:hover, .tags li.relationships a.tag:hover { background-color: #26303C; color: white; } #header .logo { display: none; } #header ul.primary { box-shadow: none; padding-top: 30px; padding-bottom: 30px; background: #FCC191 url(https://i.pinimg.com/564x/8c/bc/ae/8cbcae1760dc88ae8730566337a5d2eb.jpg); background-attachment: fixed; } li.blurb a.tag[href*="suicid"], [href*="suicide"], [href*="Suicide"], [href*="rape"], [href*="Rape"], [href*="consentual"], [href*="Consentual"], [href*="non-con"], [href*="consent issues"], [href*="Kidnapping"], [href*="kidnapping"], [href*="Canibalism"], [href*="cannibalism"], [href*="Cannibalism"], [href*="Dove"], [href*="dead dove do not eat"], [href*="murder"], [href*="Murder"], [href*="harm"], [href*="self harm"], [href*="Harm"], [href*="Torture"], [href*="abduction"], [href*="asphyxiation"], [href*="blood"], [href*="Blood"], [href*="death"], [href*="Death"], [href*="gore"], [href*="Gore"], [href*="incest"], [href*="Incest"], [href*="trauma"], [href*="Trauma"], [href*="torture"] { color: #000000; font-weight: bold; background-color: #993F33; }

[blissfulphilospher]

This new forest theme skin is my favourite!!

Hit me up if anyone else want the link! 🤗

This is so wonderful of ao3 to let us personalize our... web page? Account? As we want!! I love it!

[pinkaxolotl85]

Cut together from multiple videos because my internet kept dying in the wee hours.

Displays only the main index and bookmark index due to them being fully complete, the bookmark main page and chapter main index are also complete, just less interesting to show off. Also showing only the light skin (Epipelagic) since that's easier to work with due to my astigmatism, multiple dark modes will be released alongside it.

Works wholly within the AO3 system, bar some alignment that's accomplished with a stylus compatibility layer because AO3 still doesn't accept calc(). This is only needed on PC and will be included during the installation steps for you. (And, honestly, it still looks fine if you decide not to add it.)

Basically, what you see here is what you get. An AO3 rebuilt entirely from the ground up.

Edit: It's also WCAG AA and AAA compliant.